<template>
  <div class="home">
    <el-row :gutter="24">
      <!-- 左侧主内容区 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <div class="main-content">
          <!-- 顶部搜索和分类区 -->
          <div class="top-section">
            <!-- 搜索栏 -->
            <div class="search-section">
              <el-input
                  v-model="searchKeyword"
                  placeholder="搜索文章..."
                  @keyup.enter="handleSearch"
                  :prefix-icon="Search"
                  class="search-input"
                  size="large"
              >
                <template #append>
                  <el-button @click="handleSearch">搜索</el-button>
                </template>
              </el-input>
            </div>

            <!-- 分类导航 -->
            <div class="category-nav">
              <div
                  v-for="category in categories"
                  :key="category.key"
                  class="category-item"
                  :class="{ active: currentCategory === category.key }"
                  @click="handleCategoryChange(category.key)"
              >
                <el-icon>
                  <component :is="category.icon" />
                </el-icon>
                <span>{{ category.label }}</span>
              </div>
            </div>
          </div>

          <!-- 移动端显示的热门和最新文章 -->
          <div class="hidden-md-and-up mobile-sidebar">
            <!-- 水平滚动的文章卡片 -->
            <div class="mobile-article-sections">
              <!-- 热门文章卡片组 -->
              <div class="mobile-article-section">
                <h3 class="section-title">热门文章</h3>
                <div class="scroll-container">
                  <div class="scroll-wrapper">
                    <div v-for="(article, index) in popularArticles"
                         :key="article.id"
                         class="mobile-article-card"
                         @click="goToArticle(article.id)">
                      <div class="rank-badge" :class="{ 'top-three': index < 3 }">
                        {{ index + 1 }}
                      </div>
                      <div class="card-content">
                        <h4 class="card-title">{{ article.title }}</h4>
                        <span class="view-count" v-if="article.viewCount">
                      {{ article.viewCount }} 阅读
                    </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 最新文章卡片组 -->
              <div class="mobile-article-section">
                <h3 class="section-title">最新文章</h3>
                <div class="scroll-container">
                  <div class="scroll-wrapper">
                    <div v-for="(article, index) in latestArticles"
                         :key="article.id"
                         class="mobile-article-card"
                         @click="goToArticle(article.id)">
                      <div class="rank-badge">{{ index + 1 }}</div>
                      <div class="card-content">
                        <h4 class="card-title">{{ article.title }}</h4>
                        <span class="publish-date">
                      {{ formatDate(article.createTime) }}
                    </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 主要文章列表区域 -->
          <div class="article-list" v-loading="articleStore.loading">
            <el-card
                v-for="article in articleStore.articles"
                :key="article.id"
                class="article-card"
                :body-style="{ padding: '0px' }"
            >
              <div class="article-content">
                <!-- 左侧图片 -->
                <div class="article-image" v-if="article.thumbnailUrl">
                  <img :src="article.thumbnailUrl" alt="Article image">
                </div>
                <!-- 右侧内容 -->
                <div class="article-details">
                  <h3 @click="goToArticle(article.id)" class="article-title">
                    {{ article.title }}
                  </h3>
                  <!-- 管理员发布的文章 -->
                  <div class="admin-content-wrapper">
                    <p class="admin-content"
                       :class="{ 'collapsed': !expanded[article.id] }"
                       v-html="article.summary">
                    </p>
                    <div class="expand-button"
                         @click="toggleExpand(article.id)"
                         :class="{ 'expanded': expanded[article.id] }">
                      <el-icon class="expand-icon"><ArrowDown /></el-icon>
                      <span>{{ expanded[article.id] ? '收起' : '展开' }}</span>
                    </div>
                  </div>
                  <div class="article-meta">
                    <div class="meta-item">
                      <el-icon><User /></el-icon>
                      {{ article.author }}
                    </div>
                    <div class="meta-divider"></div>
                    <div class="meta-item">
                      <el-icon><Calendar /></el-icon>
                      {{ formatDate(article.createTime) }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>

          <!-- 分页组件 -->
          <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="articleStore.total"
                :page-sizes="[10, 20, 50]"
                :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next'"
                :small="isMobile"
                background
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            />
          </div>
        </div>
      </el-col>

      <!-- 右侧边栏 - PC端 -->
      <el-col :md="8" :lg="8" class="hidden-sm-and-down">
        <div class="sidebar">
          <!-- PC端文章区域 -->
          <div class="pc-article-sections">
            <!-- 热门文章 -->
            <div class="pc-article-section">
              <div class="section-title">热门文章</div>
              <ul class="article-list">
                <li v-for="(article, index) in popularArticles"
                    :key="article.id"
                    class="article-item"
                    @click="goToArticle(article.id)">
                  <div class="rank-badge" :class="{ 'top-three': index < 3 }">
                    {{ index + 1 }}
                  </div>
                  <div class="article-content">
                    <div class="article-title">{{ article.title }}</div>
                    <div class="article-meta" v-if="article.viewCount">
                      {{ article.viewCount }} 阅读
                    </div>
                  </div>
                </li>
              </ul>
          </div>
            <!-- 最新文章 -->
            <div class="pc-article-section">
              <div class="section-title">最新文章</div>
              <ul class="article-list">
                <li v-for="(article, index) in latestArticles"
                    :key="article.id"
                    class="article-item"
                    @click="goToArticle(article.id)">
                  <div class="rank-badge">
                    {{ index + 1 }}
                  </div>
                  <div class="article-content">
                    <div class="article-title">{{ article.title }}</div>
                    <div class="article-meta">
                      {{ formatDate(article.createTime) }}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref, onUnmounted } from 'vue'
import {useRouter} from 'vue-router'
import {useArticleStore} from '@/store/article'
import {
  Search,
  User,
  Calendar,
  ArrowDown,
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const isMobile = ref(window.innerWidth < 768)

// 用于存储每篇文章的展开状态
const expanded = ref({})
const router = useRouter()
const articleStore = useArticleStore()
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const latestArticles = ref([])
const popularArticles = ref([])

// 监听窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

// 分类定义
const categories = [
  { key: 'recommend', label: '推荐', icon: 'Medal' },
  { key: 'football', label: '足球', icon: 'Football' },
  { key: 'basketball', label: '篮球', icon: 'Basketball' },
  { key: 'nba', label: 'NBA篮球', icon: 'Basketball' },
  { key: 'football-transfers', label: '转会新闻', icon: 'bell-filled' },
  { key: 'rugby', label: '棒球', icon: 'Baseball' },
  { key: 'others', label: '其他', icon: 'More' } // 将 Others 改为 More
]

const currentCategory = ref('recommend')

// 切换展开状态
const toggleExpand = (articleId) => {
  expanded.value[articleId] = !expanded.value[articleId]
}

// 处理分类切换
const handleCategoryChange = async (category) => {
  currentCategory.value = category
  currentPage.value = 1 // 重置页码
  await loadArticles()
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 跳转到文章详情
const goToArticle = (id) => {
  router.push(`/article/${id}`)
}

// 搜索处理
const handleSearch = () => {
  if (searchKeyword.value.toString().trim()) {
    router.push({
      name: 'search',
      query: { keyword: searchKeyword.value }
    })
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadArticles()
}

const handlePageChange = (val) => {
  currentPage.value = val
  loadArticles()
}

// 加载文章数据
const loadArticles = async () => {
  await articleStore.fetchArticles(currentPage.value, pageSize.value, currentCategory.value)
}

// 加载最新文章
const loadLatestArticles = async () => {
  await articleStore.fetchLatestArticles()
  latestArticles.value = articleStore.latestArticles
}

// 加载热门文章
const loadPopularArticles = async () => {
  await articleStore.fetchPopularArticles()
  popularArticles.value = articleStore.popularArticles
}

onMounted(() => {
  loadArticles()
  loadLatestArticles()
  loadPopularArticles()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="scss">
.pagination {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .pagination {
    margin: 15px 0;
  }

  :deep(.el-pagination) {
    padding: 0;
    justify-content: center;
    width: 100%;
  }

  :deep(.el-pagination .el-pager) {
    margin: 0 5px;
  }

  :deep(.el-pagination button) {
    min-width: 28px;
  }

  :deep(.el-pagination .el-pager li) {
    min-width: 28px;
  }
}

// 移动端文章区域样式
.mobile-article-sections {
  margin-bottom: 24px;
}

.mobile-article-section {
  margin-bottom: 20px;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    padding: 0 16px;
    color: #333;
  }

  .scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .scroll-wrapper {
    display: flex;
    padding: 0 16px;
    gap: 12px;
  }
}

.mobile-article-card {
  flex: 0 0 300px;
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s;

  &:active {
    transform: scale(0.98);
  }

  .rank-badge {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    &.top-three {
      background: var(--el-color-primary);
      color: white;
    }
  }

  .card-content {
    flex: 1;
    min-width: 0; // 防止文本溢出

    .card-title {
      margin: 0 0 4px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .view-count,
    .publish-date {
      font-size: 12px;
      color: #999;
    }
  }
}

// 响应式显示控制
@media (max-width: 768px) {
  .hidden-sm-and-down {
    display: none;
  }

  .home {
    padding: 16px;
  }
}

@media (min-width: 769px) {
  .hidden-md-and-up {
    display: none;
  }
}

.home {
  padding: 24px;
  background-color: #f5f5f5;
}

// 修改搜索框样式
.top-section {
  margin-bottom: 24px;
}

.search-section {
  .search-input {
    max-width: 400px; // 限制搜索框宽度
    margin-bottom: 16px;

    :deep(.el-input__wrapper) {
      box-shadow: none;
      border: 1px solid #dcdfe6;
    }
  }
}

// 分类导航样式
.category-nav {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 24px;

  .category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;

    .el-icon {
      font-size: 18px;
    }

    &:hover {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }

    &.active {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
      font-weight: 500;
    }
  }
}

// 响应式设计补充
@media (max-width: 768px) {
  .category-nav {
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;

    &::-webkit-scrollbar {
      display: none;
    }

    .category-item {
      padding: 6px 12px;
      white-space: nowrap;
    }
  }
}

// 搜索框样式
.search-input {
  margin-bottom: 24px;
  :deep(.el-input__wrapper) {
    box-shadow: none;
    border: 1px solid #dcdfe6;
  }
}

// 文章卡片样式
.article-card {
  margin-bottom: 24px;
  transition: all 0.3s ease;
  border: none;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .article-content {
    display: flex;
    padding: 20px;
  }

  .article-image {
    flex: 0 0 200px;
    margin-right: 20px;

    img {
      width: 200px;
      height: 134px;
      object-fit: cover;
      border-radius: 4px;
    }
  }

  .article-details {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .article-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    line-height: 1.4;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  .article-excerpt {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .article-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 13px;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .meta-divider {
      width: 1px;
      height: 12px;
      background-color: #dcdfe6;
      margin: 0 12px;
    }
  }
}

// 分页样式
.pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

// 响应式设计
@media (max-width: 1200px) {
  .article-card {
    .article-image {
      flex: 0 0 160px;

      img {
        width: 160px;
        height: 107px;
      }
    }
  }
}

@media (max-width: 768px) {
  .article-card {
    .article-content {
      flex-direction: column;
    }

    .article-image {
      margin-right: 0;
      margin-bottom: 16px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 修改侧边栏样式
.sidebar {
  position: sticky;
  top: 24px;

  .sidebar-card {
    margin-bottom: 24px;
    border: none;

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid #ebeef5;

      .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
  }

  .article-links {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: 12px 20px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .sidebar-article {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .article-index {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background-color: #f5f5f5;
      color: #999;
      border-radius: 4px;
      font-size: 14px;

      &.top-three {
        background-color: var(--el-color-primary);
        color: white;
      }
    }

    .article-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      .link {
        font-size: 14px;
        color: #333;
        cursor: pointer;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        &:hover {
          color: var(--el-color-primary);
        }
      }

      .article-date,
      .article-views {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

// 新增移动端响应式样式
@media (max-width: 768px) {
  .home {
    padding: 16px;
  }

  .sidebar {
    position: static;
    margin-top: 24px;

    .sidebar-card {
      margin-bottom: 16px;

      .card-header {
        padding: 12px 16px;
      }
    }

    .article-links li {
      padding: 12px 16px;
    }

    .sidebar-article {
      gap: 8px;

      .article-index {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
      }

      .article-info {
        .link {
          font-size: 13px;
        }

        .article-date,
        .article-views {
          font-size: 11px;
        }
      }
    }
  }

  // 调整栅格间距
  :deep(.el-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :deep(.el-col) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.pc-article-sections {
  .pc-article-section {
    background: white;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .section-title {
      padding: 16px 20px;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid #ebeef5;
    }

    .article-list {
      padding: 0;
      margin: 0;
      list-style: none;

      .article-item {
        padding: 16px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: all 0.3s;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background-color: #f9f9f9;

          .article-title {
            color: var(--el-color-primary);
          }
        }

        .rank-badge {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          border-radius: 4px;
          background: #f5f5f5;
          color: #999;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;

          &.top-three {
            background: var(--el-color-primary);
            color: white;
          }
        }

        .article-content {
          flex: 1;
          min-width: 0;

          .article-title {
            margin: 0 0 8px;
            font-size: 15px;
            font-weight: 500;
            color: #333;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .article-meta {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
.admin-content-wrapper {
  position: relative;
  width: 100%;

  .admin-content {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 16px;
    overflow: hidden;
    transition: max-height 0.3s ease;

    &.collapsed {
      max-height: 66px; // 显示约3行文字
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        bottom: 40px;
        left: 0;
        width: 100%;
        height: 40px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
      }
    }
  }

  .expand-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    color: var(--el-color-primary);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;

    &:hover {
      opacity: 0.8;
    }

    .expand-icon {
      transition: transform 0.3s ease;
    }

    &.expanded {
      .expand-icon {
        transform: rotate(180deg);
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .admin-content-wrapper {
    .admin-content {
      font-size: 13px;

      &.collapsed {
        max-height: 60px; // 移动端稍微降低高度
      }
    }

    .expand-button {
      padding: 6px;
      font-size: 12px;
    }
  }
}
</style>
